/**容器属性*/
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* 水平主轴居中 */

.flex-x-center {
  -webkit-box-pack: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
}

/* 水平主轴两端对齐 */

.flex-x-between {
  -webkit-box-pack: justify;
  -moz-justify-content: space-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

/* 水平主轴end对齐 */

.flex-x-end {
  -webkit-box-pack: end;
  -moz-justify-content: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

/* 水平主轴start对齐 */

.flex-x-start {
  -webkit-box-pack: start;
  -moz-justify-content: start;
  -webkit-justify-content: start;
  justify-content: start;
}

/* 竖直轴居中 */

.flex-y-center {
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}

/* 竖直轴start对齐 */

.flex-y-start {
  -webkit-box-align: start;
  -moz-align-items: start;
  -webkit-align-items: start;
  align-items: start;
}

/* 竖直轴底部对齐 */

.flex-y-end {
  -webkit-box-align: end;
  -moz-align-items: flex-end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

/* 竖直轴文本基线对齐 */

.flex-y-baseline {
  -webkit-box-align: baseline;
  -moz-align-items: baseline;
  -webkit-align-items: baseline;
  align-items: baseline;
}

/* 竖直轴上下对齐并铺满 */

.flex-y-stretch {
  -webkit-box-align: stretch;
  -moz-align-items: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}

/* 主轴从上到下 */

.flex-topBottom {
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

/* 主轴从下到上 */

.flex-bottomTop {
  -webkit-box-pack: end;
  -webkit-box-direction: reverse;
  -webkit-box-orient: vertical;
  -moz-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

/* 主轴从左到右 */

.flex-leftRight {
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

/* 主轴从右到左 */

.flex-rightLeft {
  -webkit-box-pack: end;
  -webkit-box-direction: reverse;
  -webkit-box-orient: horizontal;
  -moz-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

/* 是否允许子元素伸缩 */

@for $i from 1 through 10 {
  .flex-item-#{$i} {
    -webkit-box-flex: $i;
    -moz-flex: $i;
    -webkit-flex: $i;
    flex: $i;
  }
}

.align-self-start {
  align-self: flex-start;
}

.align-self-end {
  align-self: flex-end;
}

.align-self-center {
  align-self: flex-center;
}

.align-self-baseline {
  align-self: flex-baseline;
}

.align-self-stretch {
  align-self: flex-stretch;
}

*::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 2px;
  box-sizing: content-box;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background-color: #999;
  border-color: transparent;
  border-width: 1px;
  border-style: solid;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #888 !important;
  border-color: #888 !important;
}
